<template>
  <zk-topBg paddingTop="30" :showBack="true" title="报损新增"></zk-topBg>
  <!-- 动态控制滚动穿透 -->
  <page-meta :page-style="'overflow:' + (popupShow ? 'hidden' : 'visible')"></page-meta>
  <view v-if="optionStatus != 'details'">
    <view class="main">
      <!-- 基本信息 -->
      <view class="cardBox">
        <view class="title">基本信息</view>
        <view class="fromTop">
          <view class="leftFrom">
            <view class="selectCard">
              <text class="inputTitle mandatory">报损类型</text>
              <view class="selectStyle">
                <uni-data-select v-model="lossType" :localdata="useLossStore.lossTypeDict"
                  :clear="false"></uni-data-select>
              </view>
              <!-- <zk-selectBox assemblyStyle="width:200px;" v-model:modelValue="lossType" value="value" selectCard="label"
              :options="useLossStore.lossTypeDict"></zk-selectBox> -->
            </view>
            <view class="selectCard">
              <text class="inputTitle">报损日期</text>
              <uni-datetime-picker type="date" v-model="datetimesingle" @change=""
                :clear-icon="false"></uni-datetime-picker>
            </view>
            <view class="inputCard">
              <text class="inputTitle mandatory">问题描述</text>
              <input v-model="problemDescription" placeholder="请输入描述信息" class="input"
                placeholder-class="input-placeholder" />
            </view>
            <view class="inputCard">
              <text class="inputTitle mandatory">解决方法</text>
              <input v-model="solution" placeholder="请输入解决方法" class="input" placeholder-class="input-placeholder" />
            </view>
          </view>
          <view class="rightFrom">
            <view class="imgCard" @tap.stop="uploadImg">
              <image v-show="addImg" :src="`${baseURL}/${addImg}`" class="addImg" mode="aspectFill" />
              <image v-show="!addImg" src="@/static/img/other/add-pic.png" class="imgIcon" />
            </view>
          </view>
        </view>
      </view>
      <!-- 审批流程 -->
      <view class="cardBox" v-if="activeMaterials.DamageReplyStatus === 'CheckFail'">
        <view class="title">审批流程</view>
        <view class="detailCard">
          <view class="dataList" style="margin-right: 180px;" v-if="activeMaterials.DamageOperatorName">
            <text class="label">发起人</text>
            <text>{{ activeMaterials.DamageOperatorName }}</text>
          </view>
          <view class="dataList" style="margin-right: 150px;" v-if="activeMaterials.DamageReplyerName">
            <text class="label">审批人</text>
            <text>{{ activeMaterials.DamageReplyerName }}</text>
          </view>
          <view class="dataList" style="margin-right: 150px;" v-if="activeMaterials.DamageReplyStatusName">
            <text class="label">审批结果</text>
            <text :class="activeMaterials.DamageReplyStatus">{{ activeMaterials.DamageReplyStatusName }}</text>
          </view>
          <view class="dataList" v-if="activeMaterials.DamageReplyMsg">
            <text class="label">审批意见</text>
            <text>{{ activeMaterials.DamageReplyMsg }}</text>
          </view>
        </view>
      </view>
      <!-- 物资信息 -->
      <view class="cardBox">
        <view class="topTitle">
          <view class="title">物资信息</view>
          <view class="titleBtn" v-show="!activeMaterials.Uuid" @tap.stop="popupOpen"><uni-icons type="plusempty"
              color="#ffffff" size="14"></uni-icons>添加物资</view>
          <view class="titleBtnTwo" v-show="activeMaterials.Uuid"><uni-icons type="plusempty" color="#CCCCD3"
              size="14"></uni-icons>添加物资</view>
        </view>
        <view class="cardTitle">
          <view class="titleText" v-for="(item, index) in useLossStore.lossAddStatus" :key="index" :style="item.style">
            {{ item.text }}
          </view>
          <view class="titleText" style="width: 104px;">报损数量</view>
          <view class="titleText" style="width: 92px;">操作</view>
        </view>
        <view v-show="!activeMaterials.Uuid" class="nullData">
          <image src="@/static/img/other/no-deat.png" class="nullImg" mode="scaleToFill" />
          <text>暂无数据，请添加</text>
        </view>
        <scroll-view v-show="activeMaterials.Uuid" :scroll-y="true" class="cardList">
          <view class="listData">
            <view class="titleText" v-for="(item, index) in useLossStore.lossAddStatus" :key="index"
              :style="item.style">
              <text v-if="item.name === 'GoodsNo'">{{ activeMaterials['GoodsNo'] || activeMaterials['GoodsNumber']
                }}</text>
              <text v-else-if="item.name === 'GoodsBatch'">{{ activeMaterials[item.name] || '-' }}/{{
                activeMaterials['ExpirationDate'] || '-'
              }}</text>
              <text v-else>{{ activeMaterials[item.name] }}</text>
            </view>
            <view class="titleText" style="width: 104px;">
              <input placeholder="请输入" v-model="GoodsNumber" class="inputLoss" type="number"
                placeholder-class="inputLoss-placeholder" />
            </view>
            <view class="titleText" style="width: 92px;">
              <uni-icons type="minus-filled" size="18" color="#F73B4A" @tap="activeMaterials = {}"></uni-icons>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom">
      <view class="preserveBut" @tap.stop="fromVerification('save')">保存</view>
      <view class="sumbitBut" @tap.stop="fromVerification('sumbit')">提交</view>
    </view>
    <!-- 弹窗 -->
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @change="popupChange">
      <view class="popup">
        <view class="popupTitle">
          <text>选择物资</text>
          <image src="@/static/img/other/pup-close.png" mode="scaleToFill" @tap.stop="popup.close()" />
        </view>
        <view class="seachCard">
          <view style="width: 540px;">
            <uni-easyinput :inputBorder="false" :clearable="false" v-model="seachText" @confirm="popupGetData('seach')"
              prefixIcon="search" placeholder="请输入物资名称或编号"></uni-easyinput>
          </view>
        </view>
        <view class="cardTitle" style="margin-top: 10px;">
          <view class="titleText" style="width: 20px;"></view>
          <view class="titleText" v-for="(item, index) in useLossStore.lossPopupStatus" :key="index"
            :style="item.style">
            {{ item.text }}
          </view>
        </view>
        <scroll-view :scroll-y="true" @scrolltolower="popupGetData" class="cardList" style="height: 308px;">
          <view class="listData" style="border-bottom: 1px solid rgb(244, 244, 244);"
            v-for="(list, indexNum) in useLossStore.lossAddList" :key="indexNum" @tap.stop="activeMaterials = list">
            <view class="titleText" style="width: 20px;">
              <uni-icons v-if="activeMaterials.Uuid === list.Uuid" type="checkbox" color="#32966F"
                size="20"></uni-icons>
              <uni-icons v-else type="circle" color="#D8DDE9" size="20"></uni-icons>
            </view>
            <view class="titleText" v-for="(item, index) in useLossStore.lossPopupStatus" :key="index"
              :style="item.style">
              <text v-if="item.name === 'GoodsNumber'">{{ list[item.name] + '/' + list['Units'] }}</text>
              <text v-else-if="item.name === 'GoodsBatch'">{{ list[item.name] || '-' }}/{{ list['ExpirationDate'] || '-'
                }}</text>
              <text v-else>{{ list[item.name] }}</text>
            </view>
          </view>
          <view class="seizeASeatDiv">{{ popupPromptMsg }}</view>
        </scroll-view>
        <view class="popupBtn">
          <view @tap.stop="popup.close()">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
  <view v-else class="main" style="padding-bottom: 0;">
    <!-- 基本信息 -->
    <view class="cardBox" style="position: relative;">
      <view class="title">基本信息</view>
      <view class="detailCard" style="width: 90%;">
        <view class="dataList">
          <text class="label">报损单号</text>
          <text>{{ activeMaterials.Uuid }}</text>
          <image src="@/static/img/other/copy-g.png" mode="scaleToFill" @tap.stop="copyUuid" />
        </view>
        <view class="dataList">
          <text class="label">报损类型</text>
          <text>{{ activeMaterials.DamageTypeName }}</text>
        </view>
        <view class="dataList">
          <text class="label">报损日期</text>
          <text>{{ activeMaterials.DamageDate }}</text>
        </view>
        <view class="dataList">
          <text class="label">问题描述</text>
          <text>{{ activeMaterials.Problems }}</text>
        </view>
        <view class="dataList">
          <text class="label">解决方法</text>
          <text>{{ activeMaterials.Solutions }}</text>
        </view>
      </view>
      <view class="imgCard" v-if="addImg">
        <image :src="`${baseURL}/${addImg}`" class="addImg" mode="aspectFill" />
      </view>
      <image :src="`../../../../static/img/other/${stausImgUrl[activeMaterials.DamageReplyStatus]}.png`"
        class="stousImg" mode="scaleToFill" />
    </view>
    <!-- 审批流程 -->
    <view class="cardBox">
      <view class="title">审批流程</view>
      <view class="detailCard">
        <view class="dataList" style="margin-right: 180px;" v-if="activeMaterials.DamageOperatorName">
          <text class="label">发起人</text>
          <text>{{ activeMaterials.DamageOperatorName }}</text>
        </view>
        <view class="dataList" style="margin-right: 150px;" v-if="activeMaterials.DamageReplyerName">
          <text class="label">审批人</text>
          <text>{{ activeMaterials.DamageReplyerName }}</text>
        </view>
        <view class="dataList" style="margin-right: 150px;" v-if="activeMaterials.DamageReplyStatusName">
          <text class="label">审批结果</text>
          <text :class="activeMaterials.DamageReplyStatus">{{ activeMaterials.DamageReplyStatusName }}</text>
        </view>
        <view class="dataList" v-if="activeMaterials.DamageReplyMsg">
          <text class="label">审批意见</text>
          <text>{{ activeMaterials.DamageReplyMsg }}</text>
        </view>
      </view>
    </view>
    <!-- 物资信息 -->
    <view class="cardBox">
      <view class="title">物资信息</view>
      <view class="cardTitle">
        <view class="titleText" v-for="(item, index) in useLossStore.lossAddStatus" :key="index" :style="item.style">
          {{ item.text }}
        </view>
        <view class="titleText" style="width: 104px;">报损数量</view>
      </view>
      <scroll-view v-show="activeMaterials.Uuid" :scroll-y="true" class="cardList" style="height: 60px;">
        <view class="listData">
          <view class="titleText" v-for="(item, index) in useLossStore.lossAddStatus" :key="index" :style="item.style">
            <text v-if="item.name === 'GoodsBatch'">{{ activeMaterials[item.name] || '-' }}/{{
              activeMaterials['ExpirationDate'] || '-'
            }}</text>
            <text v-else>{{ activeMaterials[item.name] }}</text>
          </view>
          <view class="titleText" style="width: 104px;">
            <text>{{ activeMaterials['GoodsNumber'] }}</text>
          </view>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { baseURL } from '@/utils/api/http';
import { onLoad } from '@dcloudio/uni-app';
import { useLossManageStore } from "@/stores/modules/lossManage";
import { useMemberStore } from "@/stores/modules/member";
const useLossStore = useLossManageStore()
const useMember = useMemberStore()

onLoad((options) => {
  console.log(options);
  optionStatus.value = options?.status
  if (options?.status === 'details' || options?.status === 'edit') {
    const instance: any = getCurrentInstance()?.proxy
    const eventChannel = instance.getOpenerEventChannel();

    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('channelData', function (data: AnyObject) {
      activeMaterials.value = data
      editUuid = data.Uuid
      lossType.value = data.DamageType
      problemDescription.value = data.Problems
      addImg.value = data.DamageImg
      solution.value = data.Solutions
      GoodsNumber.value = data.GoodsNumber
      datetimesingle.value = data.DamageDate
    })
  }
})

const formatDate = (timestamp: number) => {
  let date = new Date(timestamp);
  let year = date.getFullYear();
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  let day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}// 时间戳修改为xxxx-xx-xx格式

let optionStatus = ref('')// 保存进入的状态（details：详情，edit：编辑，newAddition：新增）
let lossType = ref('')// 报损类型
let datetimesingle = ref(formatDate(Date.now()))// 选择日期
let addImg = ref('') // 图片链接
let problemDescription = ref('')// 问题描述
let solution = ref('')// 解决方法
let activeMaterials: AnyObject = ref({})// 选中物资
let GoodsNumber = ref(0)// 报损物资数量
let editUuid = ''// 修改时使用的Uuid
let stausImgUrl: any = {
  CheckNot: 'approval-pending',
  CheckPass: 'approval-passed',
  CheckFail: 'approval-nopassed'
}// 显示审核状态的图片名

const uploadImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    success: function (res) {
      const tempFilePaths = res.tempFilePaths;
      uni.uploadFile({
        url: `${baseURL}/api/fileUpImg`, //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: 'file',
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data)
          addImg.value = res.files[0]
        }
      });
    }
  });
}// 上传图片

onMounted(async () => {
  // 获取物资数据
  let data = {
    GodownCode: useMember.GodownCode,
    pageNum: 1,
    pageSize: 10,
    searchParam: "",
  }
  let res = await useLossStore.getSupplies(data)
  useLossStore.lossAddList = res?.data.list
})

let popup: any = ref(null)// 获取组件实例
const popupOpen = () => {
  popup.value.open()
}// 弹出层

let popupShow = ref(false)
const popupChange = (e: any) => {
  popupShow.value = e.show ? true : false
}// 弹窗弹出时禁止页面滚动

let popupPageNum = 1// 当前页
let popupCurrPage = 1// 总页数
let popupPromptMsg = ref('加载中...')
let seachText = ref('')
const popupGetData = async (mode?: any) => {
  popupPageNum++
  if (mode === 'seach') { popupPageNum = 1 }
  if (popupPageNum > popupCurrPage) {
    popupPromptMsg.value = '到底了'
    return
  }
  popupPromptMsg.value = '加载中...'
  // 获取物资数据
  let data = {
    GodownCode: useMember.GodownCode,
    pageNum: popupPageNum,
    pageSize: 10,
    searchParam: seachText.value,
  }
  let res = await useLossStore.getSupplies(data)
  if (popupPageNum === 1) {
    useLossStore.lossAddList = res?.data.list
  } else {
    useLossStore.lossAddList.push(res?.data.list)
  }
  if (!res?.data.list.length) {
    popupPromptMsg.value = '暂无数据'
  } else {
    popupPromptMsg.value = '加载完成'
  }
  popupCurrPage = res?.data.currPage
}// 弹窗触底加载或搜索请求更多数据

// const formatTimestamp = (timestamp: number) => {
//   let date = new Date(timestamp);
//   let year = date.getFullYear();
//   let month = (date.getMonth() + 1).toString().padStart(2, '0');
//   let day = date.getDate().toString().padStart(2, '0');
//   let hours = date.getHours().toString().padStart(2, '0');
//   let minutes = date.getMinutes().toString().padStart(2, '0');
//   let seconds = date.getSeconds().toString().padStart(2, '0');
//   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// }// 时间戳处理函数

const errorPrompt = (text: string) => {
  uni.showToast({
    title: text,
    icon: "error",
    duration: 1500
  });
}// 错误提示

const fromVerification = (mode: string) => {
  // let DamageDate = formatTimestamp(datetimesingle.value)
  let data = {
    BoxCode: activeMaterials.value.BoxCode,
    DamageDate: datetimesingle.value,
    DamageImg: addImg.value,
    DamageOperator: useMember.user_id,
    DamageType: lossType.value,
    ExpirationDate: activeMaterials.value.ExpirationDate,
    GoodsBatch: activeMaterials.value.GoodsBatch,
    GodownCode: useMember.GodownCode,
    GoodsCode: activeMaterials.value.GoodsCode,
    GoodsNumber: Number(GoodsNumber.value),
    Problems: problemDescription.value.trim(),
    Solutions: solution.value.trim()
  }
  if (!data.DamageType) return errorPrompt('请选择报损类型！')
  if (!data.Problems) return errorPrompt('请输入问题描述！')
  if (!data.Solutions) return errorPrompt('请输入解决方法！')
  if (!data.GoodsCode) return errorPrompt('请添加物资信息！')
  if (!data.GoodsNumber) return errorPrompt('请输入报损数量！')
  if (optionStatus.value === 'newAddition') {
    if (data.GoodsNumber > activeMaterials.value.GoodsNumber) return errorPrompt('报损大于库存！')
  } else {
    if (data.GoodsNumber > activeMaterials.value.GoodsNo) return errorPrompt('报损大于库存！')
  }
  // 验证成功后提交
  switch (optionStatus.value) {
    case 'newAddition':
      useLossStore.lossSumbit(data, mode)
      break;

    case 'edit':
      let UData = { ...data, Uuid: editUuid }
      useLossStore.modifySumbit(UData, mode)
      break;

    default:
      break;
  }
}// 保存或提交时的表单验证

const copyUuid = () => {
  uni.setClipboardData({ data: activeMaterials.value.Uuid });
}
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;

  .cardBox {
    width: 870px;
    margin: 16px auto 0;
    padding: 20px;
    border-radius: 10px;
    background: rgb(255, 255, 255);

    .topTitle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .titleBtn {
        display: flex;
        justify-content: space-between;
        width: 94px;
        height: 46px;
        padding: 0px 15px;
        font-size: 12px;
        line-height: 46px;
        color: #ffffff;
        background-color: #08121E;
        border-radius: 8px;
      }

      .titleBtnTwo {
        display: flex;
        justify-content: space-between;
        width: 94px;
        height: 46px;
        padding: 0px 15px;
        font-size: 12px;
        line-height: 46px;
        color: #CCCCD3;
        background-color: #F2F3F4;
        border-radius: 8px;
      }
    }

    .title {
      display: flex;
      align-items: center;
      color: #2C8A66;
      font-size: 18px;
      line-height: 26px;
    }

    .title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 11px;
      border-radius: 2px;
      background: #2C8A66;
    }

    .fromTop {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .leftFrom {
        display: grid;
        justify-content: space-between;
        grid-template-columns: 1fr 1fr;
        width: 422px;

        .inputTitle {
          line-height: 40px;
          font-size: 16px;
          font-weight: 400;
        }

        .mandatory::after {
          content: '*';
          margin-left: 2px;
          color: #F73B4A;
        }

        .selectCard {
          margin-top: 10px;

          .selectStyle {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 2px;
            width: 200px;
            height: 46px;
            border: 1px solid #E4E4E4;
            border-radius: 10px;
          }
        }

        .inputCard {
          margin-top: 10px;
          grid-column: 1 / span 2;

          .input {
            box-sizing: border-box;
            width: 100%;
            height: 46px;
            padding: 0 12px;
            font-size: 14px;
            border: 1px solid #E4E4E4;
            border-radius: 10px;
          }

          .input-placeholder {
            color: #CCCCD3;
          }
        }
      }

      .rightFrom {
        margin-top: 40px;

        .imgCard {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          width: 392px;
          height: 248px;
          border: 1px dashed #E4E4E4;
          border-radius: 10px;
          background: #F1F4F3;

          .addImg {
            width: 392px;
            height: 248px;
            border-radius: 10px;
          }

          .imgIcon {
            width: 43px;
            height: 43px;
          }
        }
      }
    }

    .inputLoss {
      width: 60px;
      height: 35px;
      margin: auto;
      padding: 0px 12px;
      font-size: 13px;
      border-radius: 8px;
      border: 1px solid #E4E4E4;
    }

    .inputLoss-placeholder {
      color: #CCCCD3;
    }

    .cardList {
      width: 100%;
      height: 220px;
      font-size: 14px;

      .listData {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 12px;

        .titleText {
          text-align: center;
        }
      }
    }

    .nullData {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 220px;

      .nullImg {
        width: 172px;
        height: 172px;
        margin: 16px;
      }

      text {
        font-size: 14px;
        color: #CCCCD3;
      }
    }

    .detailCard {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      width: 100%;

      .dataList {
        display: flex;
        align-items: center;
        line-height: 32px;
        font-size: 14px;
        margin-right: 32px;

        .label {
          color: #ADAFB8;
          margin-right: 10px;
        }

        image {
          width: 14px;
          height: 14px;
          margin-left: 12px;
        }

        .CheckNot {
          color: #EFA022;
        }

        .CheckPass {
          color: #32966F;
        }

        .CheckFail {
          color: #F73B4A;
        }
      }
    }

    .stousImg {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 88px;
      height: 88px;
    }

    .imgCard {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 392px;
      height: 248px;
      margin: 20px 0;
      border: 1px dashed #E4E4E4;
      border-radius: 10px;
      background: #F1F4F3;

      .addImg {
        width: 392px;
        height: 248px;
        border-radius: 10px;
      }

      .imgIcon {
        width: 43px;
        height: 43px;
      }
    }
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 72px;
  font-size: 15px;
  box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;

  .preserveBut {
    width: 104px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    margin-right: 12px;
    background: #EEEEEE;
  }

  .sumbitBut {
    width: 464px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    border-radius: 10px;
    margin-right: 12px;
    background: #32966F;
  }
}

.popup {
  position: relative;
  width: 646px;
  height: 480px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 0;
  background-color: #ffffff;

  .popupTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 30px;

    text {
      font-size: 18px;
    }

    image {
      width: 27px;
      height: 27px;
    }
  }

  .seachCard {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 550px;
    margin: 10px auto 0;
    height: 46px;
    border: 1px solid rgb(220, 223, 230);
    border-radius: 10px;
  }

  .seizeASeatDiv {
    width: 100%;
    height: 110px;
    line-height: 26px;
    text-align: center;
    font-size: 12px;
    color: #CCCCD3;
  }

  .popupBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #ffffff;

    view {
      width: 364px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      color: #ffffff;
      background-color: #32966F;
      border-radius: 10px;
      font-size: 16px;
    }
  }
}

.cardTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  color: #ADAFB8;
  margin-top: 16px;
  background-color: #F2F3F4;

  .titleText {
    text-align: center;
  }
}

.cardList {
  width: 100%;
  height: 220px;
  font-size: 14px;

  .listData {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 12px;

    .titleText {
      text-align: center;
    }
  }
}

::v-deep.uni-select__input-text {
  font-size: 14px;
  color: #08121E;
}

::v-deep.uni-select__input-placeholder {
  font-size: 14px;
  color: #CCCCD3;
}

::v-deep.uni-select {
  border: none;
  border-radius: 2px;
}

::v-deep.zk_btn .text {
  margin: 0 2px !important;
}



::v-deep .fs_16 {
  font-size: 14px;
}

::v-deep.uni-date-x--border {
  border: none;
}

::v-deep .uni-date-x {
  height: 46px;
  border: 1px solid #E4E4E4;
  border-radius: 10px;
  color: #000000;

  .icon-calendar {
    display: none;
  }

  .uni-date__x-input {
    padding-left: 12px;
  }
}
</style>
